<template>
  <el-container>
    <!-- 你好这是快递员的取件 -->
    <el-header>
      <el-menu
      
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1"
          ><img class="a" src="../tlc/img/快递 (1).png"
        /></el-menu-item>
        <el-menu-item index="0" class="z"
          ><router-link :underline="false" to="/kdypickup"
            ><span class="zt">首页</span></router-link
          ></el-menu-item
        >
        <div class="dd">快速登录/注册</div>
      </el-menu>
      <div class="line"></div>
    </el-header>

    <el-menu
    
      class="wc"
      mode="horizontal"
      @select="handleSelect"
      background-color="#324f94"
      text-color="#fff"
      active-text-color="#a0d919"
      style="width: 100%"
    >
      <el-menu-item index="4" class="a1">
        <router-link :underline="false" to="/kdypickup"
          ><img class="a" src="../tlc/img/004-查快递 (1).png" /><span class="zt"
            >快递员的取件</span
          ></router-link
        ><span></span
      ></el-menu-item>
      <el-menu-item index="4" class="a2">
        <router-link :underline="false" to="/kdysend"
          ><img class="a" src="../tlc/img/002-快递箱 (1).png" /><span
            class="zt"
          ></span
          >快递派送</router-link
        ><span></span
      ></el-menu-item>
      <el-menu-item index="4" class="a3">
        <router-link :underline="false" to="/kdycomputation"
          ><img class="a" src="../tlc/img/005-收快递 (1).png" /><span class="zt"
            >查看货物是否填写进行计量</span
          ></router-link
        ><span></span
      ></el-menu-item>
      <el-menu-item index="4" class="a3">
        <router-link :underline="false" to="/kdyworkingRange"
          ><img class="a" src="../tlc/img/005-收快递 (1).png" /><span class="zt"
            >取派件工作范围</span
          ></router-link
        ><span></span
      ></el-menu-item>
      <el-menu-item index="4" class="a3">
        <router-link :underline="false" to="/kdyinformation"
          ><img class="a" src="../tlc/img/005-收快递 (1).png" /><span class="zt"
            >快递员个人信息</span
          ></router-link
        ><span></span
      ></el-menu-item>
    </el-menu>

    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="快递货物是否填写和计量" name="second">
      </el-tab-pane>
    </el-tabs>
    <!-- 分页表 -->
           <el-card shadow="always" class="boxmainA">
               <!-- 三连表分页 -->
              <div>
                <el-table
                  class="tableA"
                  style="width: 100%"
                  align="center"
                  v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  :data="DriverWorklist"
                >
                  <el-table-column label="序号" prop="transportationId" width="100">
                  </el-table-column>
                  <el-table-column
                    label="作业编号"
                    prop="transshipmentTmsDriverWorkSheet.driverWorkSheetJobNumber"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column
                    label="司机姓名"
                    prop="transshipmentTmsDriverDetails.driverName"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column
                    label="调度机构(所属转运中心)"
                    prop="transportationSchedulingMechanism"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    label="车牌号码"
                    prop="transportationLicensePlateNumber"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    label="计划发车时间"
                    prop="transportationScheduleDepartureTime"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    label="实际到达时间"
                    prop="actualtimeofarrival"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    label="运输任务编号"
                    prop="transportationNumber"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    label="作业状态"
                    prop="transshipmentTmsDriverWorkSheet.driverWorkStatus"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column>
                     <el-button type="primary" icon="el-icon-edit" size="mini"  @click.native="updateRow(SystemTmsUsersBean)">填写</el-button>
                  </el-table-column>
                </el-table>
                <!-- ----------------------------------------------------------------------------------------- -->
                <!-- 分页对应的数据 -->
                <el-pagination
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="parameter.page"
                  :page-sizes="[2, 4, 6, 8]"
                  :pager-count="9"
                  background
                  :page-size.sync="parameter.num"
                  layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
                <!-- 这是信息修改弹出框 -->
                <el-dialog :title="title" :visible.sync="dialogFormVisible">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm" >
                    <el-form-item label="我的序列ID" style="display:none" >
                      <el-input v-model="ruleForm.systemUserId"  type="hidden"  ></el-input>
                    </el-form-item>
                    <el-form-item label="用户名">
                      <el-input v-model="ruleForm.usersUsername"  ></el-input>
                    </el-form-item>
                    <el-form-item label="账号">
                      <el-input v-model="ruleForm.usersAccountNumber" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="ruleForm.usersPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-radio-group v-model="ruleForm.usersSex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="手机号码">
                      <el-input v-model="ruleForm.usersPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="ruleForm.usersMailbox"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-edit" size="medium"  @click.native="submitForm('ruleForm')">确认填写修改</el-button>
                      <el-button>取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-dialog>
            <!-- ---- -->
          

              </div>
            </el-card>

    
    <!-- 最下面的图片 -->
    <el-footer class="img01">
      <h1><img src="../tlc/img/11.png" style="width: 100%" /></h1>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
       dialogFormVisible: false,  //模态框
      //蓝色样式  
      activeName: "second",
      //loading加载element-ui提供的加载事件
      loading: true,
      //表格data 循环的数据
      DriverWorklist: [],
      //分页对应的数据 page num （id，name）对应条件
      parameter: {
        page: 1,
        num: 2,
        driverWorkSheetJobNumber: "",
        driverName: "",
        driverWorkStatus: "",
        transportationNumber: "",
      },
      // 分页总条数
      total: 0,
       //修改共用的一个数据类
      ruleForm: {
        systemUserId:"",
        usersUsername: "",
        usersPassword: "",
        usersSex:"",
        usersPhone: "",
        usersMailbox: "", 
      },
      //表单判断是否为空
      rules: {
        usersUsername: [{ required: true, message: "用户名不可为空", trigger: "blur" }],
        usersPassword: [{ required: true, message: "用户密码不可为空", trigger: "blur" }],
        usersSex: [{ required: true, message: "性别不可为空", trigger: "blur" }],
        usersPhone: [{ required: true, message: "电话号码不可为空", trigger: "blur" }],
        usersMailbox: [{ required: true, message: "邮箱不可为空", trigger: "blur" }],
      },
    };
    
  },
  methods: {
      //确认填写提交
      submitForm(formUpdatebean) {
        console.log("查看**************")
        console.log(this.ruleForm)
        this.$refs[formUpdatebean].validate((valid) => {
          if (valid) {
              this.axios.post("/api/updateByusersAccountNumber", this.ruleForm).then((res) => {
                if (res.data > 0) {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.dialogFormVisible = false;
                  this.load();
                }
              });
          } else {
          // console.log("error submit!!");
            return false;
          }
        });
      },
     //填写数据
      updateRow(tbBean) {
      this.dialogFormVisible = true;
      this.title = "修改我的个人信息";
      this.ruleForm.systemUserId = tbBean.systemUserId;
      this.ruleForm.usersUsername = tbBean.usersUsername;
      this.ruleForm.usersAccountNumber = tbBean.usersAccountNumber;
      this.ruleForm.usersPassword = tbBean.usersPassword;
      this.ruleForm.usersSex =tbBean.usersSex;
      this.ruleForm.usersPhone = tbBean.usersPhone;
      this.ruleForm.usersMailbox = tbBean.usersMailbox;
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    //条件分页查询
    load() {
      // console.log(this.parameter) 判断条件查询 null ''
      this.axios
        .post(
          "/api/transshipment-tms-transportation-task-management/DriverWorkPageBycondition",
          this.parameter
        )
        .then((res) => {
          this.DriverWorklist = res.data.list;
          this.parameter.page = res.data.pageNum;
          this.parameter.num = res.data.pageSize;
          this.total = res.data.total;
          // console.log(res.data.list);
          //加载样式
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        });
    },
  },
  //初始化加载
  created() { this.load(); },
};
</script>

<style scoped>
.tableA {
  margin: 20px;
  margin-left: -0.5px;
}
.q {
  position: relative;
  text-align: left;
  left: 1240px;
  font-size: 20px;
}
.fs {
  position: relative;
  text-align: left;
  left: 150px;
  font-size: 20px;
}
.img01 {
  width: 1500px;
  height: 700px;
  position: relative;
  top: 600px;
}
.boxmainA {
  width: 1300px;
  /* height: 410px; */
  position: relative;
  left: 20px;
  margin: -10px auto;
  text-align: center;
  font-size: 20px;
  /* background-color: red; */
}
.z {
  font-size: 18px;
  color: #000;
}
.a1 {
  position: relative;
  left: 130px;
}
.a2 {
  position: relative;
  left: 220px;
}
.a3 {
  position: relative;
  left: 320px;
}
.dd {
  text-align: right;
}
el-menu-item {
  size: 0cm;
  color: #000;
}
.a {
  margin: -17px auto;
  left: 50%;
}
.el-button {
  line-height: 20px;
  font-size: 17px;
  color: #000;
  width: 100px;
  border-radius: 4px;
}
.el-container {
  margin: -10px auto;
  margin-left: -10px;
  margin-right: -10px;
}
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-radius: 4px;
}

.demo-image__lazy {
  height: 440px;
  margin: -10px auto;
  text-align: center;
}
</style>